<template>
	<view class="message_container">
		<u-navbar title="消息" :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<view class="btn_container">
			<view class="btn_item">
				<view class="icon">
					<u-icon name="heart-fill" size="28" color="#FF5678"></u-icon>
				</view>
				<text class="text">新增点赞</text>
			</view>
			<view class="btn_item">
				<view class="icon">
					<u-icon name="account-fill" size="28" color="#FF5678"></u-icon>
				</view>
				<text class="text">新增关注</text>
			</view>
			<view class="btn_item">
				<view class="icon">
					<u-icon name="bell" size="28" color="#FF5678"></u-icon>
				</view>
				<text class="text">评论与@</text>
			</view>
		</view>
		<view class="message_list">
			<view v-for="(item, index) in chatStore.chats" :key="index" class="list_item" @click="navigatorToChatDetail(item)">
				<u-avatar shape="square" size="45" :src="item.headImage" customStyle="margin: -3px 10px -3px 0;flex-shrink: 1;"></u-avatar>
				<view class="label_container">
					<view class="send_nick_name">{{ item.sendNickName }}</view>
					<view class="last_content yc1">{{ item.lastContent }}</view>
				</view>
				<view class="right_container">
					<text>{{ item.lastSendTime }}</text>
				</view>
				</u-cell>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				chatStore: {
					activeIndex: -1,
					chats: [{
							unreadCount: 1,
							showName: "aaaa",
							sendNickName: "2222",
							headImage: "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
							lastSendTime: "04-22 16:30",
							lastContent: "嘿嘿嘿嘿😊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
						},
						{
							unreadCount: 100,
							showName: "莎莉",
							sendNickName: "2222",
							headImage: "http://gips2.baidu.com/it/u=3093819921,829322739&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
							lastSendTime: "",
							lastContent: "早上好呢，你在干啥呢",
						},
						{
							unreadCount: 130,
							showName: "jack",
							sendNickName: "2222",
							headImage: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
							lastSendTime: "",
							lastContent: "你好呀",
						},
						{
							unreadCount: 130,
							showName: "jack",
							sendNickName: "2222",
							headImage: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
							lastSendTime: "",
							lastContent: "你好呀",
						},
						{
							unreadCount: 130,
							showName: "jack",
							sendNickName: "2222",
							headImage: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
							lastSendTime: "",
							lastContent: "你好呀",
						},
						{
							unreadCount: 130,
							showName: "jack",
							sendNickName: "2222",
							headImage: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
							lastSendTime: "",
							lastContent: "你好呀",
						},
					],
					privateMsgMaxId: 0,
					groupMsgMaxId: 0,
					loadingPrivateMsg: false,
					loadingGroupMsg: false,
				},
				menu: {
					show: false,
					style: "",
					chatIdx: -1,
					items: [{
							key: "DELETE",
							name: "删除",
							icon: "trash",
						},
						{
							key: "TOP",
							name: "置顶",
							icon: "arrow-up",
						},
					],
				},
			};
		},
		mounted() {
			this.chatStore.chats = [...this.chatStore.chats, ...this.chatStore.chats];
		},
		methods: {
			navigatorToChatDetail(item) {
				uni.navigateTo({
					url: '/pagesChat/chat/index'
				})
			},
			onSelectMenu(item) {
				switch (item.key) {
					case "DELETE":
						this.removeChat(this.menu.chatIdx);
						break;
					case "TOP":
						this.moveToTop(this.menu.chatIdx);
						break;
					default:
						break;
				}
				this.menu.show = false;
			},
			onShowMenu(e, chatIdx) {
				uni.getSystemInfo({
					success: (res) => {
						let touches = e.touches[0];
						let style = "";
						/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
						if (touches.clientY > res.windowHeight / 2) {
							style = `bottom:${res.windowHeight - touches.clientY}px;`;
						} else {
							style = `top:${touches.clientY}px;`;
						}
						if (touches.clientX > res.windowWidth / 2) {
							style += `right:${res.windowWidth - touches.clientX}px;`;
						} else {
							style += `left:${touches.clientX}px;`;
						}
						this.menu.style = style;
						this.menu.chatIdx = chatIdx;
						//
						this.$nextTick(() => {
							this.menu.show = true;
						});
					},
				});
			},
			removeChat(chatIdx) {
				this.$store.commit("removeChat", chatIdx);
			},
			moveToTop(chatIdx) {
				this.$store.commit("moveTop", chatIdx);
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: this.unreadCount + "",
					});
				} else {
					uni.removeTabBarBadge({
						index: 0,
						complete: () => {},
					});
				}
			},
		},
		computed: {
			unreadCount() {
				let count = 0;
				this.chatStore.chats.forEach((chat) => {
					count += chat.unreadCount || 0;
				});
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg;
			},
		},
		watch: {
			// unreadCount(newCount, oldCount) {
			// 	this.refreshUnreadBadge();
			// }
		},
		onShow() {
			// this.refreshUnreadBadge();
		},
	};
</script>

<style scoped lang="scss">
	.message_container {
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.btn_container {
		margin: 10px 0;
		display: flex;
		justify-content: space-between;

		.btn_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				width: 50px;
				height: 50px;
				background-color: #ffeef2;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.text {
				font-size: 26rpx;
				color: rgba(102, 102, 102, 1);
				margin-top: 10rpx;
			}
		}
	}

	.message_list {
		flex: 1;
		margin-top: 12px;
		overflow: auto;

		::v-deep .list_item {
			display: flex;
			flex-direction: row !important;
			align-items: center !important;
			padding: 15px !important;
			border-bottom: 1px solid #e9e9e9;

			.label_container {
				width: calc(100% - 80px - 45px);
				.send_nick_name {
					font-size: 16px;
					color: #333333;
					font-weight: 500;
					margin-bottom: 5px;
				}

				.last_content {
					font-size: 14px;
					color: #999999;
				}
			}

			.right_container {
				font-size: 12px;
				color: #999;
				font-weight: 500;
				flex-shrink: 1;
				width: 80px;
				margin-top: -25px;
				display: flex;
				align-items: flex-start;
				justify-content: flex-end;
			}
		}
	}
</style>